<template>
  <div class="home">
    <!-- <p>count：{{ $store.state.count }}</p> -->  <!--  模块话之前 -->
    <p>count：{{ $store.state.home.count }}</p>  <!--  模块话之后 -->
    <button @click="addCount">count 自加</button>
    <button @click="decrement">count 自减</button>
    <p>派生属性 desc 测试：{{ $store.getters.desc }}</p>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    addCount() {
      // 现获取状态值
      // console.log(this.$store.state.count);  // 模块化钱前
      console.log(this.$store.state.home.count);  // 模块化后
      // 修改 count 值
      // this.$store.commit('increment')
      // this.$store.commit('increment', 10)
      // 触发 action 修改 state
      this.$store.dispatch('add', 10)
    },
    decrement() {
      // 现获取状态值
      // console.log(this.$store.state.count);
      // 修改 count 值
      // this.$store.commit('decrement')
      this.$store.dispatch('decrement')
    }
  }
};
</script>